﻿@page "/JsInterop/FullscreenView"
@using Maanfee.Dashboard.Examples.Views.JsInterop.Components
@using Maanfee.Dashboard.Examples.Views.JsInterop.Pages.JsInterop._004Fullscreen.Codes;

<MaanfeeDashboardPage>
    <MaanfeeDashboardPageHeader PageTitle="Fullscreen API" Title="Fullscreen API  - Maanfee Dashboard" SubTitle="How to use Blazor JsQuery to view an element in fullscreen mode." />

    <DashboardPageContent>
        <DashboardPageSection Title="Examples">
            <MudGrid>
                <MudItem md="12">
                    <MudSimpleTable Dense="@true" Hover="@true" Bordered="@true" Striped="@true" Style="overflow-x: auto;">
                        <thead>
                            <tr>
                                <th>Method</th>
                                <th>Example</th>
                                <th>Selects</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            @*OpenFullscreen*@
                            <tr>
                                <td style="color: #8323d8;">OpenFullscreen()</td>
                                <td>
                                    <MudText Typo="Typo.caption" Color="Color.Success">
                                        await Fullscreen.OpenFullscreen(Id)
                                    </MudText>
                                </td>
                                <td>
                                    <MudText Typo="Typo.caption" Color="Color.Info">
                                        To open the part of page in fullscreen
                                    </MudText>
                                </td>
                                <td>
                                    <MudButton OnClick="@(()=>OpenExampleDialog("FullscreenMethod", typeof(FullscreenMethod)))" StartIcon="@Icons.Material.Filled.PlayArrow" Variant="Variant.Filled" Size="Size.Small" Color="Color.Success">Try</MudButton>
                                </td>
                            </tr>
                            @*CloseFullscreen*@
                            <tr>
                                <td style="color: #8323d8;">CloseFullscreen()</td>
                                <td>
                                    <MudText Typo="Typo.caption" Color="Color.Success">
                                        await Fullscreen.CloseFullscreen()

                                    </MudText>
                                </td>
                                <td>
                                    <MudText Typo="Typo.caption" Color="Color.Info">
                                        This method cancels an element in fullscreen mode.
                                    </MudText>
                                </td>
                                <td>
                                    <MudButton OnClick="@(()=>OpenExampleDialog("FullscreenMethod", typeof(FullscreenMethod)))" StartIcon="@Icons.Material.Filled.PlayArrow" Variant="Variant.Filled" Size="Size.Small" Color="Color.Success">Try</MudButton>
                                </td>
                            </tr>
                            @*ToggleFullscreenAsync*@
                            <tr>
                                <td style="color: #8323d8;">ToggleFullscreenAsync()</td>
                                <td>
                                    <MudText Typo="Typo.caption" Color="Color.Success">
                                        await Fullscreen.ToggleFullscreenAsync()

                                    </MudText>
                                </td>
                                <td>
                                    <MudText Typo="Typo.caption" Color="Color.Info">
                                        To open the whole page in fullscreen
                                    </MudText>
                                </td>
                                <td>
                                    <MudButton OnClick="@(()=> Fullscreen.ToggleFullscreenAsync())" StartIcon="@Icons.Material.Filled.Fullscreen" Variant="Variant.Filled" Size="Size.Small" Color="Color.Primary">FullScreen</MudButton>
                                </td>
                            </tr>
                            @*IsFullscreenAsync*@
                            <tr>
                                <td style="color: #8323d8;">IsFullscreenAsync()</td>
                                <td>
                                    <MudText Typo="Typo.caption" Color="Color.Success">
                                        await Fullscreen.IsFullscreenAsync()

                                    </MudText>
                                </td>
                                <td>
                                    <MudText Typo="Typo.caption" Color="Color.Info">
                                        Is page in fullscreen mode ?
                                    </MudText>
                                </td>
                                <td>
                                    <MudButton OnClick="@(()=>OpenExampleDialog("IsFullscreenMethod", typeof(IsFullscreenMethod)))" StartIcon="@Icons.Material.Filled.PlayArrow" Variant="Variant.Filled" Size="Size.Small" Color="Color.Success">Try</MudButton>
                                </td>
                            </tr>
                        </tbody>
                    </MudSimpleTable>
                </MudItem>
            </MudGrid>
        </DashboardPageSection>
    </DashboardPageContent>
</MaanfeeDashboardPage>

@code {

    private void OpenExampleDialog(string CodeFileName, Type Type)
    {
        DialogParameters parameters = new DialogParameters();
        parameters.Add("CodeFileName", CodeFileName);
        parameters.Add("Type", Type);

        var dialog = Dialog.Show<DialogTry>("Try", parameters,
        new DialogOptions()
            {
                MaxWidth = MaxWidth.Large,
                FullWidth = true,
                Position = DialogPosition.Center,
            });

    }
}
